<template>
  <div class="patient-operate-container">
    <el-menu
      :default-active="selectedRoute"
      class="el-menu-demo"
      mode="horizontal"
    >
      <el-menu-item
        index="patientAppointment"
        @click="handleRouteChange('patientAppointment')"
        >预约</el-menu-item
      >
      <el-menu-item
        index="patientReport"
        @click="handleRouteChange('patientReport')"
        >报告</el-menu-item
      >
    </el-menu>
    <router-view :doctors="doctors"></router-view>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, nextTick } from "vue";
const instance = getCurrentInstance();
const proxy = instance?.proxy as any;
import {
  useRoute,
  useRouter,
  RouteLocationNormalized,
  Router,
} from "vue-router";
const route: RouteLocationNormalized = useRoute();
const router: Router = useRouter();
import { RequestParams } from "@/types/request";
import { DoctorInfo } from "@/types/user";

const selectedRoute = ref<string>(route.name as string);
import { usePatientDiagnosisStore } from "@/stores/patientDiagnosisStore";
const patientDiagnosisStore = usePatientDiagnosisStore();
const patientData = patientDiagnosisStore.getPatientInfo();

const doctors = ref<DoctorInfo[]>([]);

const fetchDoctors = async () => {
  try {
    let result: any = await proxy.request({
      method: "get",
      url: proxy.api.patientsDoctorInfo,
      params: {} as RequestParams,
      headers: {
        token: patientData.token,
      },
    });
    if (!result) {
      return;
    }
    if (result.code === 1) {
      const doctorsData = result.data.map((doctor: DoctorInfo) => {
        const { ["password"]: _, ...rest } = doctor;
        return rest;
      });
      doctors.value = doctorsData.map((doctor: DoctorInfo) => ({
        ...doctor,
        appointmentStatus: null, //new 预约状态
      }));
    } else {
      proxy.message.warning("获取医生信息失败");
    }
  } catch (error) {
    proxy.message.error("获取医生信息失败，请检查网络连接");
  }
};

const handleRouteChange = (routeName: string) => {
  selectedRoute.value = routeName;
  router.push({ name: routeName });
};

onMounted(async () => {
  await fetchDoctors();
  await nextTick();
  if (route.path === "/patient/patientOperate") {
    router.push("/patient/patientOperate/patientAppointment");
  }
});
</script>

<style scoped>
.patient-operate-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>
